<template>
	<view class="tn-safe-area-inset-bottom">

		<cu-custom bgColor="bg-gradual-them" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">信息公告</block>
		</cu-custom>


		<!-- 顶部 tabs标签选项 -->
		<view style="margin: auto;">
			<scroll-view scroll-x class="bg-white nav" enable-flex style="justify-content: space-around;"
				scroll-with-animation :scroll-left="scrollLeft">

				<view>

					<view class="cu-item"
						style="justify-content: space-around !important; width: 22%;text-align: center;"
						:class="index == TabCur?'text-them cur':''" v-for="(item,index) in navTop" :key="index"
						@tap="tabSelect" :data-id="index">
						<!-- 全部 -->
						<view :class="0 === TabCur ? 'tn-icon-discover-planet-fill':''" class="tn-icon-discover-planet"
							v-if="index === 0">{{' '}} {{item.title}}</view>
						<!-- 领养 -->
						<view :class="1 === TabCur ? 'tn-icon-trust-fill':''" class="tn-icon-trust" v-if="index === 1">
							{{' '}} {{item.title}}
						</view>
						<!-- 救助 -->
						<view :class="2 === TabCur ? 'tn-icon-like-fill':''" class="tn-icon-like" v-if="index === 2">
							{{' '}} {{item.title}}
						</view>
						<!-- 其他 -->
						<view :class="3 === TabCur ? 'tn-icon-order-fill':''" class="tn-icon-order" v-if="index === 3">
							{{' '}} {{item.title}}
						</view>

					</view>
				</view>
			</scroll-view>
		</view>



		<!-- 公告 -->

		<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<block v-for="(item, index) in content" :key="index">
				<view v-show="TabCur === 0 && item.status == '正常' ? true 
		: TabCur === 1 && item.label == '领养' && item.status== '正常' ? true
		: TabCur === 2 && item.label == '救助' && item.status== '正常' ? true
		: TabCur === 3 && item.label == '其他' && item.status== '正常' ? true : false" class="article-shadow tn-margin"
					@click="goNoticeMessage(item.id)">
					<view class="tn-flex" style="background-color: #fff;">
						<view class="image-pic tn-margin-sm" :style="'background-image:url(' + item.photo + ')'">
							<view class="image-article">
							</view>
						</view>
						<view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
							<view class="tn-text-lg tn-text-bold clamp-text-1">
								{{ item.title }}
							</view>
							<view class="tn-padding-top-xs" style="min-height: 100rpx;">
								<text class=" tn-text-sm tn-color-gray clamp-text-2">
									{{ item.body }}
								</text>
							</view>
							<view class="tn-flex tn-flex-row-between tn-flex-col-between">

								<!-- 领养标签 -->
								<view v-if="item.label == '领养' "
									class="tn-bg-red--light tn-color-red justify-content-item tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold">
									<text class="tn-tag-content__item--prefix">#</text> {{ item.label }}
								</view>

								<!-- 救助标签 -->
								<view v-if="item.label == '救助' "
									class="tn-bg-purplered--light tn-color-purplered justify-content-item tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold">
									<text class="tn-tag-content__item--prefix">#</text> {{ item.label }}
								</view>

								<!-- 其他标签 -->
								<view v-if="item.label == '其他' "
									class="tn-bg-blue--light tn-color-blue justify-content-item tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold">
									<text class="tn-tag-content__item--prefix">#</text> {{ item.label }}
								</view>


								<view class="justify-content-item tn-color-gray tn-text-center tn-color-gray--disabled"
									style="padding-top: 5rpx;font-size: 25rpx;">
									<text class="tn-icon-time tn-padding-right-xs"></text>
									<text class="tn-padding-right">{{ item.createTime }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>


		<view class="tn-padding-xl"></view>



	</view>
</template>

<script>
	export default {

		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,

				//顶部
				navTop: [{
						id: 1,
						title: '全部'
					},
					{
						id: 2,
						title: '领养'
					},
					{
						id: 3,
						title: '救助'
					},
					{
						id: 4,
						title: '其他'
					},
				],

				current: 0,

				// 
				content: [],

				//      content: [{
				// id: 1,
				//          photo: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',
				// status: '正常',
				//          title: '全新出发，新版本已上线，欢迎三连',
				// label: '领养',

				//          body: '小程序前端源码，免费开源，欢迎白嫖嗷嗷，可以的话，插件市场三连支持一下',

				// img:'',   // 多种图片

				//          hot: 543,
				//          createTime: '2021年12月20日',
				// },{
				// id: 2,
				//          photo: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',

				//          title: '全新出发，新版本已上线，欢迎三连',
				//        	label: '救助',

				//          body: '小程序前端源码，免费开源，欢迎白嫖嗷嗷，可以的话，插件市场三连支持一下',

				//        	img:'',   // 多种图片

				//          hot: 543,
				//          createTime: '2021年12月20日',
				// },{
				// id: 3,
				// photo: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg',

				// title: '全新出发，新版本已上线，欢迎三连',
				// label: '其他',

				// body: '小程序前端源码，免费开源，欢迎白嫖嗷嗷，可以的话，插件市场三连支持一下',

				// img:'',   // 多种图片

				// hot: 543,
				// createTime: '2021年12月20日',
				// },
				//      ],
			}
		},

		onLoad() {
			this.getNotices() // 获取公告

		},
		methods: {

			// 获取公告
			getNotices() {
				this.$u.api.getNotices({}).then(res => {
					console.log("公告信息：", res)

					if (res.code == 200) {
						// TODO 数据填充
						this.content = [...res.data.map(item => {

							item.photo = this.myimgurl() + item.photo

							// 时间加工
							item.createTime = item.createTime.split(" ")
							item.createTime = item.createTime[0]
							item.createTime = item.createTime.split("-")
							item.createTime = item.createTime[0] + "年" + item.createTime[1] + "月" +
								item.createTime[2] + "日"

							return item

						})]
						// 反转顺序
						this.content.reverse();
						console.log("this.content: ", this.content)
					}
				})
			},

			// 查看详细
			goNoticeMessage(id) {
				// 热度+1



				// 跳转到下一个页面
				uni.navigateTo({
					url: './noticeDetail?id=' + id,
				});
			},

			// 全屏分页
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				console.log('this.TabCur', this.TabCur)
			},
		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background: linear-gradient(-120deg, #fbfffd, #ebfbff);

	}
</style>

<style lang="scss" scoped>
	@import '@/static/css/templatePage/custom_nav_bar.scss';

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 5rpx;
			font-size: 40rpx;
			margin-right: 10rpx;
			margin-left: 30rpx;
			flex-basis: 5%;
		}

		&__search {
			flex-basis: 60%;
			width: 100%;
			height: 100%;

			&__box {
				width: 100%;
				height: 70%;
				padding: 10rpx 0;
				margin: 0 30rpx;
				border-radius: 60rpx 60rpx 0 60rpx;
				font-size: 24rpx;
			}

			&__icon {
				padding-right: 10rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}

			&__text {
				color: #AAAAAA;
			}
		}
	}

	.logo-image {
		width: 60rpx;
		height: 60rpx;
		position: relative;
		margin-top: -15rpx;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 50%;
	}

	/* 自定义导航栏内容 end */

	/* 资讯主图 start*/
	.image-article {
		border-radius: 8rpx;
		border: 1rpx solid #F8F7F8;
		width: 200rpx;
		height: 200rpx;
		position: relative;
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 10rpx;
	}

	.article-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 文字截取*/
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-2 {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 35rpx;
			padding: 5rpx 25rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}



	/* 图标容器15 start */
	.icon15 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;


				}
			}
		}
	}
</style>
